<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
		<view class="kong"></view>
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">使用说明</view>
				<view class="return"></view>
			</view>
		</view>
		
		<view class="banner">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/location.png" mode="scaleToFill"></image>
		</view>
		
		<view class="choose_list">
			<view class="list_item" v-for="(item,index) in usedirections" :key="index" @click="jump(item)">
				<view class="item_wrap">
					<view class="list_left">{{item.title}}</view>
					<view class="list_right">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/mycenter/right.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usedirections:[],
				token:'',
			}
		},
		onLoad(option) {
			//调用说明
			this.token=option.token
			this.get_directions()
		},
		methods: {
			//在线教程列表
			get_directions(){
				let params={
					token:this.token
				};
				var url ='/api/home/Instructions/index'
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					// console.log(res);
					if (res.statusCode == 200 && res.data.code == 1) {
						this.usedirections = res.data.data
						// console.log(this.usedirections)
					} 
				});
			},
			//使用说明详情
			jump(item){
				uni.navigateTo({
					url:'/pages/userdetail/userdetail?id=' + item.id+'&token='+this.token
				})
			},
			//返回
			returnPage(){
			    uni.navigateBack({
					delta:1
			    })
			},
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 200upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.banner{
		width: 100%;
		padding-top: 220upx;
		image{
			width: 100%;
			height: 300upx;
		}
	}
	.choose_list{
		width: 100%;
		.list_item{
			width: 100%;
			height: 100upx;
			border-bottom: 2upx solid #ededed;
			display: flex;
			align-items: center;
			justify-content: center;
			.item_wrap{
				width: 90%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				.list_left{
					flex: 1;
				}
				.list_right{
					flex: 1;
					text-align: right;
					image{
						width: 30upx;
						height: 30upx;
					}
				}
			}
		}
	}
}
</style>
